<template>
	<view>
		<view class="top">
			<view class="topFlex">
				<image src="/static/restaurant/index/address1.png" class="topFlexImg"></image>
				<view class="topFlexText">{{address}}</view>
				<view class="topFlexRight" @click="getLocation()">重新定位</view>
			</view>

		</view>
		<s-skeleton type="list" :loading="loading3"></s-skeleton>
		<view class="list" v-if="list && list.length > 0">
			<view class="listFlex" v-for="(item,index) in list" :key="index" @tap="choose(item)">
				<view class="listBorder" v-if="item.status == 0"></view>
				<view class="listBorder listBorderA" v-if="item.status == 1">
					<view class="listBorderMin"></view>
				</view>
				<view class="listCenter">
					<view class="listTitle">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
					<view class="listText">{{item.name}} {{item.mobile}}</view>
				</view>
				<image src="/static/restaurant/index/address2.png" class="listImg" @tap.stop="$wanlshop.to(`/pages/restaurant/index/addAddress?id=${item.id}&type=edit`)"></image>
				<image src="/static/restaurant/user/del.png" class="listImg" @tap.stop="del(item,index)"></image>
			</view>
		</view>
		<s-empty v-if="list && list.length == 0"></s-empty>

		<uni-load-more v-if="list && list.length > 0" :status="status" :content-text="contentText" />


		<view class="zw"></view>
		<view class="btn" @tap="$wanlshop.to('/pages/restaurant/index/addAddress?type=add')">
			<uni-icons type="plusempty" size="24" color="#FA802A"></uni-icons>
			<view class="btnText">添加地址</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require("@/common/qqmap-wx-jssdk.js");
	var qqmapsdk;
	export default {
		data() {
			return {
				loading3: true,
				list: [],
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				type: 0, // 来源 1 下单

				longitude: null,
				latitude: null,
				address: "获取定位中"
			}
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		onLoad(option) {
			this.getLocation();
			if (option.s) {
				this.type = option.s
			}
		},
		onShow() {
			this.current_page = 1;
			this.reload = true;
			this.loadData()
		},
		methods: {
			async del(item,index) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除该地址？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.deladdress({
								address_id:item.id
							})
							if(res.code == 1) {
								this.$wanlshop.msg('删除成功');
								this.list.splice(index,1)
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			getLocalAuthorize() {
				let that = this
				// #ifdef H5
				that.getLocation()	
				// #endif
				// #ifdef MP-WEIXIN
				// 判断是否有位置权限
				uni.getSetting({
				  success(res) {
				    if (!res.authSetting['scope.userFuzzyLocation']) {
				      // 没有位置权限
				      uni.authorize({
				        scope: 'scope.userFuzzyLocation',
				        success() {
				          // 用户已授权，可以直接调用 getFuzzyLocation
				          uni.getFuzzyLocation({
				            success: function (res) {
				              console.log('获取位置成功', res);
											that.getLocation()
				            },
				            fail: function (err) {
				              console.log('获取位置失败', err);
				            }
				          });
				        },
				        fail() {
				          // 用户拒绝授权，可引导用户去设置中开启
				          uni.showModal({
				            title: '提示',
				            content: '此功能需要获取您的位置信息，请确认授权',
				            success: function (modalRes) {
				              if (modalRes.confirm) {
				                uni.openSetting();
				              } else {
												
											}
				            }
				          });
				        }
				      });
				    } else {
				      // 已有位置权限，可以直接调用 getFuzzyLocation
				      that.getLocation()
				    }
				  }
				});
				
				// #endif
			},
			// 获取当前市区定位
			getLocation() {
				let that = this
				// #ifdef MP-WEIXIN
				uni.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						//填入自己的key
						qqmapsdk = new QQMapWX({
								key: "JTEBZ-O6Z6W-YCQR6-OEV3F-LICME-EKBRK"
							}),
							that.latitude = res.latitude;
						that.longitude = res.longitude;
						//wx.getFuzzyLocation()方法获取的只是所在地区的经纬度，
						//获取所在地区的具体城市信息还需要进行逆地址解析
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: that.latitude,
								longitude: that.longitude
							},
							success: function(res) {
								// console.log(res)
								that.address = res.result.address;
							},
							fail: function(err) {
								console.log(err);
							},
						})
					}
				})
				// #endif
				
				// #ifdef H5
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success(res) {
						console.log(res)
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						uni.request({
							url: that.$config.baseUrl + '/index/getlocation',
							 // url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: 'BVCBZ-C4M6B-GYWUK-N7BAL-H4PUE-VYFNF',
								location: res.latitude + ',' + res.longitude
							},
							success: res => {
								if (res.statusCode == 200) {
									that.address = JSON.parse(res.data.data).result.address
								}
							}
						});
					},
					fail: (e) => {
						console.log(e)
					}
				})
				// #endif
			},
			choose(item) {
				if (this.type == 0) {
					this.$wanlshop.to(`/pages/restaurant/index/addAddress?id=${item.id}&type=edit`)
				} else if (this.type == 1) {
					let pages = getCurrentPages(); //获取当前页面
					let beforePage = pages[pages.length - 2] //获取上一个页面的实例
					beforePage.$vm.address = item
					uni.navigateBack({
						delta: 1
					}); //跳转到上一页面
				}
			},
			async loadData() {
				let res = await this.$api.getAddressList({
					page: this.current_page
				});
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					this.list = this.reload ? res.data.data : (this.list || []).concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
					this.loading3 = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.top {
		width: 100%;
		padding: 0 30rpx;
		height: 108rpx;

		.topFlex {
			width: 100%;
			height: 108rpx;
			border-bottom: 1rpx solid #E0E0E0;
			display: flex;
			align-items: center;

			.topFlexImg {
				width: 32rpx;
				height: 36rpx;

			}

			.topFlexText {
				width: 500rpx;
				height: auto;
				margin-left: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.topFlexRight {
				margin-left: auto;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FA802A;
			}
		}
	}

	.list {
		padding: 0 30rpx;

		.listFlex {
			width: 100%;
			height: auto;
			display: flex;
			margin-top: 40rpx;

			.listBorder {
				width: 32rpx;
				height: 32rpx;
				border-radius: 100%;
				border: 2rpx solid #999999;
				margin-top: 5rpx;
			}

			.listBorderA {
				border: 2rpx solid #FA802A;

				.listBorderMin {
					width: 16rpx;
					height: 16rpx;
					background: #FA802A;
					border-radius: 100%;
					margin: 0 auto;
					margin-top: 6rpx;
				}
			}

			.listCenter {
				width: 550rpx;
				height: auto;
				margin-left: 20rpx;

				.listTitle {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.listText {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #555555;
					margin-top: 8rpx;
				}
			}

			.listImg {
				width: 36rpx;
				height: 36rpx;
				margin-left: auto;
				margin-top: 5rpx;
			}
		}
	}

	.zw {
		width: 100%;
		height: 84rpx;
		padding-bottom: 68rpx;
	}

	.btn {
		width: 510rpx;
		height: 84rpx;
		border-radius: 42rpx;
		border: 2rpx solid #FA802A;
		margin: 0 auto;
		position: fixed;
		bottom: 68rpx;
		left: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btnText {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FA802A;
			margin-left: 16rpx;
		}
	}
</style>